<template>
    <div>
        <div class="top_">
            <OverTitle>
                <template v-slot:default>数据监控</template>
            </OverTitle>
            <ul>
                <li>
                    <OverStatue>
                        <template v-slot:title>今日累计登录</template>
                        <template v-slot:content>{{ loginDay }}/人</template>
                    </OverStatue>
                </li>
                <li>
                    <OverStatue>
                        <template v-slot:title>用户累计</template>
                        <template v-slot:content>{{ userLength }}/人</template>
                    </OverStatue>
                </li>
                <li>
                    <OverStatue>
                        <template v-slot:title>文章发布累计</template>
                        <template v-slot:content>{{ writingsLength }}/次</template>
                    </OverStatue>
                </li>
                <li>
                    <OverStatue>
                        <template v-slot:title>访问量</template>
                        <template v-slot:content>{{ webLength }}/次</template>
                    </OverStatue>
                </li>
            </ul>
        </div>

        <div class="bottom_">
            <div class="head">
                <div class="head_">
                    <img src="../../../public/static/overView/shenghe.png" alt="">
                    待审核文章
                </div>
                <div class="head_">
                    <img src="../../../public/static/overView/shenghe.png" alt="">
                    流量监控
                </div>
            </div>

            <div class="form">

                <div class="table">
                    <table cellspacing="0" border="0" cellpadding="0"  >
                        <thead>
                        <tr>
                            <td>序号</td>
                            <td>文章ID</td>
                            <td>封面</td>
                            <td>类型</td>
                            <td>状态</td>
                            <td>操作</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in fuzzyQueries" v-if="fuzzyQueries.length>0">
                            <td style="width: 40px">{{ index + 1 }}</td>
                            <td style="width: 40px">{{ item.wid }}</td>
                            <td style="width: 200px">
                                <p v-if="!item.img">无</p>
                                <img v-else :src=" item.img.split(',').length > 1 ? item.img.split(',')[0] : item.img "
                                     alt="图片丢失或不存在" style="width:155px;height: 90px;margin-top: 5px">
                            </td>
                            <td style="width: 100px">{{ item.type }}</td>
                            <td style="width: 90px">待审核</td>
                            <td style="width: 90px">
                                <button @click="edit_userInfo(item)">查看</button>
                            </td>
                        </tr>
                        <tr v-else-if="fuzzyQueries.length===0 && load_" style="height: 50vh;background: transparent">
                            <LoadTheAnimation ></LoadTheAnimation>
                        </tr>
                        <tr v-show="!load_">
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><h2>暂无需要审核文章</h2></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        </tbody>
                    </table>
                </div>

<!--                <div class="table">-->
<!--                    <ColumnChart :total="total"></ColumnChart>-->
<!--                </div>-->
            </div>
        </div>
        <WebInformation></WebInformation>
    </div>
</template>

<script>
import OverStatue from "@/components/Overview/OverStatue.vue";
import OverTitle from "@/components/Overview/OverTitle.vue";
import SiteInformation from "@/components/WebsiteAdministration/SiteInformation.vue";
import WebInformation from "@/components/home/WebInformation.vue";
import api from "@/api";
import LoadTheAnimation from "@/components/publicCommon/LoadTheAnimation.vue";
import ColumnChart from "@/components/publicCommon/ColumnChart.vue";

export default {
    name: "OverView",
    components: {ColumnChart, LoadTheAnimation, WebInformation, SiteInformation, OverTitle, OverStatue},
    data() {
        return {
            userLength: "",
            writingsLength: "",
            loginDay: "",
            webLength: "",
            fuzzyQueries: [],
            load_:true,
            total:{
                login:"",
                visit:"",
            },
        }
    },
    mounted() {

        api.userLogin().then((res) => {
            this.loginDay = res.data.data
            this.total.login = this.loginDay;
        })
        api.getUserLength().then((res) => {
            this.userLength = res.data.data
        })
        api.writingsNum().then((res) => {
            this.writingsLength = res.data.data
        })
        api.webLength().then((res) => {
            this.webLength = res.data.data
            this.total.visit = this.webLength;
        })
        api.writingsState().then((res) => {
            this.fuzzyQueries = res.data.data
            if(this.fuzzyQueries.length===0){
                setTimeout(()=>{
                    this.load_ = false;
                },1000)
            }else {
                this.load_ = true;
            }
        })
    },
    methods: {
        edit_userInfo(info) {
            window.localStorage.setItem("edit_info", JSON.stringify(info));
            this.$router.push('/articleInformationEditing')
        },
    }
}
</script>

<style scoped>
.form {
    display: flex;
    justify-content: center;
    align-items: center;
}

.top_ {
    padding: 10px 10px;
    box-shadow: 0 0 5px 3px rgba(72, 74, 75, 0.24);
}

.top_ ul {
    position: relative;
    display: flex;
    justify-content: space-around;
    list-style: none;
}

thead {
    position: sticky;
    left: 0;
    top: 0;
    box-shadow: 0 0 5px 3px rgba(115, 116, 117, 0.24);
    z-index: 99999999;
}

.bottom_ {
    display: block;
    width: 100%;
    height: 100%;
    background: #f9f9fc;
}

.head {
    display: flex !important;
    justify-content: left !important;
    align-items: center !important;
    height: 40px;
    width: 100%;
    border-bottom: 1px solid #3586f1;
}

.head_ {
    flex: 1;
    display: flex;
    justify-content: left;
    align-items: center;
}

.head img {
    width: 20px;
    margin-left: 10px;
}

.table {
    position: relative;
    overflow: auto;
    width: 100%;
    height: 400px;
    margin-right: 20px;
}

.table:nth-child(2) {
    margin-right: 0;
}

.table::-webkit-scrollbar {
    width: 8px;
}

.table::-webkit-scrollbar-thumb {
    border-radius: 1px;
    background: #f1c3d5;
}

.table::-webkit-scrollbar-track {
    border-radius: 0;
    background: #f9f9fc;
}

table {
    width: 100%;
    position: relative;
}

th {
    border: 1px solid #282828;
}

tr {
    margin-bottom: 5px;
    background: #f8f6f6;
    animation: tr_ 0.5s ease-in-out 0s 1 forwards;
}

@keyframes tr_ {
    0% {
        transform: scaleY(0%);
    }
    100% {
        transform: scaleY(100%);
    }
}

tr:nth-child(2n) {
    margin-bottom: 5px;
    background: rgba(143, 140, 140, 0.6);
}

td {
    text-align: center;
    height: 45px;
}

button {
    padding: 8px 15px;
    background: #3586f1;
    color: white;
    cursor: pointer;
    outline: none;
    border: 0;
    border-radius: 3px;
}

button:hover {
    opacity: .8;
}

ul li {
    transition: all .3s;
    box-shadow: 0 0 5px 0 rgba(115, 116, 117, 0.24);
}

li:hover {
    transform: translateY(-10px);
}
</style>